<template>
    <div class="register-container">
        <div class="register-container__content">
            <div class="register-title">{{ $project.projectName }}注册</div>
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
                <template v-if="tableName === 'yihurenyuan'">
                    <el-form-item label="医护工号" prop="yihugonghao">
                        <el-input v-model="ruleForm.yihugonghao" autocomplete="off" placeholder="医护工号" type="text" />
                    </el-form-item>
                    <el-form-item label="密码" prop="mima">
                        <el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="password" />
                    </el-form-item>
                    <el-form-item label="确认密码" prop="mima2">
                        <el-input v-model="ruleForm.mima2" autocomplete="off" placeholder="确认密码" type="password" />
                    </el-form-item>
                    <el-form-item label="医护姓名" prop="yihuxingming">
                        <el-input v-model="ruleForm.yihuxingming" autocomplete="off" placeholder="医护姓名" type="text" />
                    </el-form-item>
                    <el-form-item label="医护性别" prop="yihuxingbie">
                        <el-select v-model="ruleForm.yihuxingbie" placeholder="请选择医护性别">
                            <el-option v-for="(item, index) in yihurenyuanyihuxingbieOptions" :key="index" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="照片" prop="zhaopian">
                        <file-upload
                            tip="点击上传照片"
                            action="file/upload"
                            :limit="3"
                            :multiple="true"
                            :fileUrls="ruleForm.zhaopian ? ruleForm.zhaopian : ''"
                            @change="yihurenyuanzhaopianUploadChange"
                        ></file-upload>
                    </el-form-item>
                    <el-form-item label="职称" prop="zhicheng">
                        <el-input v-model="ruleForm.zhicheng" autocomplete="off" placeholder="职称" type="text" />
                    </el-form-item>
                    <el-form-item label="医护等级" prop="yihudengji">
                        <el-select v-model="ruleForm.yihudengji" placeholder="请选择医护等级">
                            <el-option v-for="(item, index) in yihurenyuanyihudengjiOptions" :key="index" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="lianxidianhua">
                        <el-input v-model="ruleForm.lianxidianhua" autocomplete="off" placeholder="联系电话" type="text" />
                    </el-form-item>
                    <el-form-item label="身份证" prop="shenfenzheng">
                        <el-input v-model="ruleForm.shenfenzheng" autocomplete="off" placeholder="身份证" type="text" />
                    </el-form-item>
                </template>
                <template v-else-if="tableName === 'laoren'">
                    <el-form-item label="老人编号" prop="laorenbianhao">
                        <el-input v-model="ruleForm.laorenbianhao" autocomplete="off" placeholder="老人编号" type="text" />
                    </el-form-item>
                    <el-form-item label="老人姓名" prop="laorenxingming">
                        <el-input v-model="ruleForm.laorenxingming" autocomplete="off" placeholder="老人姓名" type="text" />
                    </el-form-item>
                    <el-form-item label="密码" prop="mima">
                        <el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="password" />
                    </el-form-item>
                    <el-form-item label="确认密码" prop="mima2">
                        <el-input v-model="ruleForm.mima2" autocomplete="off" placeholder="确认密码" type="password" />
                    </el-form-item>
                    <el-form-item label="老人照片" prop="laorenzhaopian">
                        <file-upload
                            tip="点击上传老人照片"
                            action="file/upload"
                            :limit="3"
                            :multiple="true"
                            :fileUrls="ruleForm.laorenzhaopian ? ruleForm.laorenzhaopian : ''"
                            @change="laorenlaorenzhaopianUploadChange"
                        />
                    </el-form-item>
                    <el-form-item label="老人性别" prop="laorenxingbie">
                        <el-select v-model="ruleForm.laorenxingbie" placeholder="请选择老人性别">
                            <el-option v-for="(item, index) in laorenlaorenxingbieOptions" :key="index" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="老人年龄" prop="laorennianling">
                        <el-input v-model="ruleForm.laorennianling" autocomplete="off" placeholder="老人年龄" type="text" />
                    </el-form-item>
                    <el-form-item label="联系电话" prop="lianxidianhua">
                        <el-input v-model="ruleForm.lianxidianhua" autocomplete="off" placeholder="联系电话" type="text" />
                    </el-form-item>
                    <el-form-item label="家属姓名" prop="jiashuxingming">
                        <el-input v-model="ruleForm.jiashuxingming" autocomplete="off" placeholder="家属姓名" type="text" />
                    </el-form-item>
                    <el-form-item label="关系" prop="guanxi">
                        <el-input v-model="ruleForm.guanxi" autocomplete="off" placeholder="关系" type="text" />
                    </el-form-item>
                    <el-form-item label="手机号" prop="shoujihao">
                        <el-input v-model="ruleForm.shoujihao" autocomplete="off" placeholder="手机号" type="text" />
                    </el-form-item>
                    <el-form-item label="家庭住址" prop="jiatingzhuzhi">
                        <el-input v-model="ruleForm.jiatingzhuzhi" autocomplete="off" placeholder="家庭住址" type="text" />
                    </el-form-item>
                </template>
            </el-form>
            <div class="button-box">
                <el-button type="primary" @click="login()">注册</el-button>
                <div class="cursor-pointer" @click="close()">已有账号，直接登录</div>
            </div>
        </div>
    </div>
</template>

<script>
import { rules } from '@/utils/validate';

export default {
    computed: {
        rules() {
            return rules;
        },
    },
    data() {
        return {
            ruleForm: {},
            tableName: '',
            yihurenyuanyihuxingbieOptions: [],
            yihurenyuanyihudengjiOptions: [],
            laorenlaorenxingbieOptions: [],
        };
    },
    mounted() {
        this.tableName = this.$storage.get('loginTable');
        this.yihurenyuanyihuxingbieOptions = '男,女'.split(',');
        this.$http({
            url: `option/yihudengji/yihudengji`,
            method: 'get',
        }).then(({ data }) => {
            if (data && data.code === 0) {
                this.yihurenyuanyihudengjiOptions = data.data;
            } else {
                this.$message.error(data.msg);
            }
        });
        this.laorenlaorenxingbieOptions = '男,女'.split(',');
    },
    created() {},
    destroyed() {},
    methods: {
        // 获取uuid
        getUUID() {
            return new Date().getTime();
        },
        close() {
            this.$router.push({ path: '/login' });
        },
        yihurenyuanzhaopianUploadChange(fileUrls) {
            this.ruleForm.zhaopian = fileUrls;
        },
        laorenlaorenzhaopianUploadChange(fileUrls) {
            this.ruleForm.laorenzhaopian = fileUrls;
        },

        // 多级联动参数

        // 注册
        async login() {
            const valid = await this.$refs['ruleForm'].validate();
            if (!valid) return;

            var url = this.tableName + '/register';
            if (this.ruleForm.zhaopian) {
                this.ruleForm.zhaopian = this.ruleForm.zhaopian.replace(new RegExp(this.$base.url, 'g'), '');
            }

            if (!this.$validate.isMobile(this.ruleForm.lianxidianhua)) {
                return this.$message.error(`联系电话应输入手机格式`);
            }

            if (`yihurenyuan` === this.tableName && !this.$validate.checkIdCard(this.ruleForm.shenfenzheng)) {
                return this.$message.error(`身份证应输入身份证格式`);
            }

            if (this.ruleForm.laorenzhaopian) {
                this.ruleForm.laorenzhaopian = this.ruleForm.laorenzhaopian.replace(new RegExp(this.$base.url, 'g'), '');
            }

            this.$http({
                url: url,
                method: 'post',
                data: this.ruleForm,
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.$message({
                        message: '注册成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {
                            this.$router.replace({ path: '/login' });
                        },
                    });
                } else {
                    this.$message.error(data.msg);
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped></style>
